<script setup lang="ts">
interface Props {
  modelValue: string
}

interface Emits {
  (e: 'update:modelValue', value: string): void
  (e: 'clear'): void
}

const props = defineProps<Props>()
const emit = defineEmits<Emits>()

const updateSearch = (value: string) => {
  emit('update:modelValue', value)
}

const clearSearch = () => {
  emit('update:modelValue', '')
  emit('clear')
}
</script>

<template>
  <div class="search-container">
    <div class="search-box">
      <input
        :value="modelValue"
        @input="(e) => updateSearch((e.target as HTMLInputElement).value)"
        type="text"
        placeholder="搜索进程名称..."
        class="search-input"
      />
      <button v-if="modelValue" @click="clearSearch" class="clear-button">✕</button>
    </div>
  </div>
</template>

<style scoped lang="scss">
@use '@/style/variables.scss' as vars;
@use '@/style/mixins.scss' as mixins;

.search-container {
  margin-bottom: vars.$spacing-lg;
}

.search-box {
  position: relative;
  max-width: 400px;
}

.search-input {
  @include mixins.glass-input;
  padding: vars.$spacing-md 40px vars.$spacing-md vars.$spacing-md;
}

.clear-button {
  position: absolute;
  right: vars.$spacing-sm;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: vars.$text-muted;
  cursor: pointer;
  font-size: vars.$font-size-base;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all vars.$transition-fast;

  &:hover {
    background: vars.$bg-glass-hover;
    color: vars.$text-primary;
  }
}
</style>
